html {
  font-size: 15px;
}
body {
  width: 100vw;
  height: 100vh;
  display: grid;
  justify-content: center;
  align-content: center;
  background-color: #2c3e50;
  grid-auto-flow: column;
  gap: 0.8rem;
}

article {
  width: 400px;
  height: 400px;
  border: solid 2px #000;
  overflow: hidden;
  perspective: 900px;
  box-shadow: 0 0 10px rgba(#000000, 1);
  section {
    width: 100%;
    height: 100%;
    transition-duration: 2s;
    position: relative;
    cursor: pointer;
    .title,
    .preview {
      position: absolute;
      transition-duration: 1s;
    }
    .title {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-rows: repeat(2, 1fr);
      transform: rotateY(-180deg);
      h3,
      p {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      h3 {
        font-size: 2rem;
        color: white;
        background-color: #34495e;
      }
      p {
        background-color: #16a085;
      }
    }
    .preview {
      backface-visibility: hidden;
    }
  }
  &:hover {
    section {
      transform: rotateX(360deg);
      .title {
        transform: rotateY(0deg);
      }
      .preview {
        transform: rotateY(180deg);
      }
    }
  }
}
